KnockoutJS একটি শক্তিশালী JavaScript লাইব্রেরি যা MVVM (Model-View-ViewModel) প্যাটার্ন ব্যবহার করে ডাইনামিক ওয়েব অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে। KnockoutJS তে custom binding এর মাধ্যমে আপনি নতুন নতুন ফিচার বা ডেটা-বাইন্ডিং কৌশল তৈরি করতে পারেন, যা আপনার অ্যাপ্লিকেশনের ফিচারকে আরও সমৃদ্ধ এবং কার্যকরী করে তোলে।
Custom Bindings হল এমন বিশেষ binding handlers যা KnockoutJS এ ডিফাইন করা হয় এবং আপনি যেকোনো DOM উপাদান (যেমন, div, input, button ইত্যাদি) এর সাথে কার্যকরী ডেটা-বাইন্ডিং করতে পারেন।
এখানে Custom Binding এর মাধ্যমে নতুন ফিচার যুক্ত করার পদ্ধতি দেখানো হয়েছে:
KnockoutJS তে Custom Binding তৈরি করা
KnockoutJS তে custom binding তৈরি করার জন্য, আপনি ko.bindingHandlers অবজেক্ট ব্যবহার করে নতুন bindings ডিফাইন করতে পারেন।
Custom Binding Example: A Tooltip Binding
ধরা যাক, আপনি একটি tooltip যোগ করতে চান যেটি একটি DOM উপাদানটির উপর হোভার করলে প্রদর্শিত হবে। এটি custom binding এর মাধ্যমে করা যাবে।
Step 1: Define the Custom Binding
ko.bindingHandlers.tooltip = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
// Get the value for the tooltip from the valueAccessor
var tooltipText = ko.unwrap(valueAccessor());
// Create a new div for the tooltip and set its text
var tooltipElement = document.createElement('div');
tooltipElement.className = 'tooltip';
tooltipElement.innerHTML = tooltipText;
// Initially hide the tooltip
tooltipElement.style.display = 'none';
document.body.appendChild(tooltipElement);
// When mouse enters the element, show the tooltip
element.addEventListener('mouseover', function() {
tooltipElement.style.display = 'block';
var rect = element.getBoundingClientRect();
tooltipElement.style.left = rect.left + 'px';
tooltipElement.style.top = rect.top - tooltipElement.offsetHeight + 'px';
});
// When mouse leaves the element, hide the tooltip
element.addEventListener('mouseout', function() {
tooltipElement.style.display = 'none';
});
}
};
Step 2: Apply the Custom Binding to an Element
এখন, আপনি tooltip custom binding ব্যবহার করে একটি HTML element এর উপর টুলটিপ দেখাতে পারেন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Custom Binding Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
<style>
.tooltip {
position: absolute;
background-color: #333;
color: white;
padding: 5px;
border-radius: 5px;
font-size: 12px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<button data-bind="tooltip: 'This is a tooltip!'">Hover over me!</button>
<script>
// Activating KnockoutJS bindings
ko.applyBindings();
</script>
</body>
</html>
Explanation:
- Custom Binding Definition:
ko.bindingHandlers.tooltipএর মাধ্যমে আপনি নতুন tooltip binding তৈরি করেছেন। এটিinitফাংশনের মাধ্যমে DOM উপাদানটির সাথে যুক্ত হয়।- যখন উপাদানটি মাউস দিয়ে হোভার করা হবে, তখন টুলটিপ প্রদর্শিত হবে এবং মাউস আউট করলে এটি আবার লুকিয়ে যাবে।
- Using the Custom Binding:
data-bind="tooltip: 'This is a tooltip!'"এর মাধ্যমে আপনি tooltip বাইন্ডিং ব্যবহার করেছেন। এটিbuttonএলিমেন্টে টুলটিপ টেক্সট যোগ করবে।
Custom Binding এর আরো উদাহরণ:
1. Binding to Highlight an Element
এখানে একটি highlight custom binding তৈরি করা হবে যা একটি DOM উপাদানকে highlight (রঙ পরিবর্তন) করবে যখন এটি হোভার করা হবে।
ko.bindingHandlers.highlight = {
update: function(element, valueAccessor) {
var value = ko.unwrap(valueAccessor());
if (value) {
element.style.backgroundColor = 'yellow';
} else {
element.style.backgroundColor = '';
}
}
};
এটি ব্যবহার করার জন্য HTML তে:
<button data-bind="highlight: isHighlighted">Click to Highlight</button>
<button data-bind="click: toggleHighlight">Toggle Highlight</button>
<script>
function ViewModel() {
this.isHighlighted = ko.observable(false);
this.toggleHighlight = () => this.isHighlighted(!this.isHighlighted());
}
ko.applyBindings(new ViewModel());
</script>
Explanation:
- এখানে
highlightcustom binding ব্যবহার করা হচ্ছে যা observable ডেটার ভিত্তিতে DOM উপাদানটির ব্যাকগ্রাউন্ড রঙ পরিবর্তন করবে। updateফাংশনে observable এর মান চেক করা হচ্ছে এবং যদি মানtrueহয়, তবে এলিমেন্টটি highlight হবে (ব্যাকগ্রাউন্ড হলুদ হবে), অন্যথায় এটি স্বাভাবিক হয়ে যাবে।
2. Custom Binding for Animations
KnockoutJS তে animation এর জন্য custom binding তৈরি করাও সম্ভব। ধরুন, একটি এলিমেন্টের উপর মাউস হোভার হলে আপনি একটি fadeIn/fadeOut এনিমেশন যোগ করতে চান।
ko.bindingHandlers.fadeVisible = {
update: function(element, valueAccessor) {
var value = ko.unwrap(valueAccessor());
if (value) {
$(element).fadeIn();
} else {
$(element).fadeOut();
}
}
};
এটি ব্যবহার করার জন্য HTML তে:
<div data-bind="fadeVisible: isVisible">This is a fade-in element!</div>
<button data-bind="click: toggleVisibility">Toggle Visibility</button>
<script>
function ViewModel() {
this.isVisible = ko.observable(true);
this.toggleVisibility = () => this.isVisible(!this.isVisible());
}
ko.applyBindings(new ViewModel());
</script>
Explanation:
- fadeVisible custom binding jQuery ব্যবহার করে এলিমেন্টটির দৃশ্যমানতা নিয়ন্ত্রণ করছে।
fadeInএবংfadeOutএনিমেশন দিয়ে এলিমেন্টটির দৃশ্যমানতা পরিবর্তন হচ্ছে যখন isVisible এর মান পরিবর্তিত হয়।
Custom Binding কেন ব্যবহার করা হয়?
- Extend KnockoutJS Functionality:
- KnockoutJS এর মাধ্যমে আপনি বিল্ট-ইন ফিচার ছাড়াও নতুন নতুন dynamic এবং interactive ফিচার যোগ করতে পারেন।
- Reusable Code:
- Custom binding তৈরি করার মাধ্যমে আপনি কোডকে পুনঃব্যবহারযোগ্য এবং মডুলার করতে পারেন, যা অ্যাপ্লিকেশনের স্কেলেবিলিটি এবং রক্ষণাবেক্ষণ সহজ করে তোলে।
- Cleaner HTML:
- Custom binding ব্যবহার করে আপনার HTML কোডে আরও পরিষ্কার এবং ডিক্লারেটিভ ডেটা-বাইন্ডিং করা যায়, যা কোডের গুণগত মান উন্নত করে।
- Improves Code Separation:
- ViewModel এবং UI এর মধ্যে স্পষ্ট বিভাজন নিশ্চিত করতে custom bindings ব্যবহার করা হয়, যা কোডের রক্ষণাবেক্ষণ সহজ করে তোলে।
KnockoutJS তে custom bindings তৈরি করা আপনাকে নতুন ফিচার ও কাস্টম কার্যকারিতা যোগ করতে সহায়তা করে, যা আপনার অ্যাপ্লিকেশনকে আরও ডাইনামিক এবং কার্যকরী করে তোলে। আপনি DOM manipulation, animations, conditional rendering, custom logic ইত্যাদি সহজেই custom binding এর মাধ্যমে সংযুক্ত করতে পারেন। KnockoutJS এর MVVM প্যাটার্নের সাথে custom bindings একত্রিত করে আপনি শক্তিশালী এবং রক্ষণাবেক্ষণযোগ্য অ্যাপ্লিকেশন তৈরি করতে পারবেন।
Read more
